<template>
  <el-container>
    <el-header style="margin-top: 40px;">
      <el-row>
        <el-col :span="1">
          <el-button @click="operate = 'create'; dialog.operate.display = true" type="primary" icon="el-icon-plus">添加</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        v-loading="page.loading"
        :data="table.data"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          sortable
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          sortable
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          sortable
          prop="introduction"
          label="描述">
        </el-table-column>
        <el-table-column
          prop="button"
          label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button @click="update(scope.row)" type="primary" icon="el-icon-edit"></el-button>
              <el-button @click="remove(scope.row)" type="primary" icon="el-icon-delete"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="load"
        layout="prev, pager, next"
        :total="table.total"
        :page-size="table.size"
        :current-page="table.page">
      </el-pagination>
      <el-dialog
        :close-on-click-modal="false"
        :title="operate === 'update'? '修改权限' : '添加权限'"
        :visible.sync="dialog.operate.display"
        width="30%">
      <span>
        <el-form ref="permission" label-position="top" :model="permission">
          <el-form-item label="名称" prop="name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
            <el-input v-model="permission.name"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="introduction" :rules="[{ required: true, message: '请输入描述', trigger: 'blur' }]">
            <el-input v-model="permission.introduction"></el-input>
          </el-form-item>
        </el-form>
      </span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.operate.display = false">取 消</el-button>
        <el-button type="primary" v-if="operate === 'create'" @click="create">确 定</el-button>
        <el-button type="primary" v-if="operate === 'update'" @click="update_">确 定</el-button>
      </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import { page, create, remove, update } from '@/api/permission'
export default {
  name: "UserPermission",
  data () {
    return {
      table: {
        data: null,
        page: 1,
        size: 10,
        total: null
      },
      page: {
        loading: true
      },
      dialog: {
        operate: {
          display: false
        }
      },
      permission: {
        name: '',
        introduction: ''
      },
      operate: null
    }
  },
  methods: {
    create () {
      this.$refs['permission'].validate((valid) => {
        if (valid) {
          create(this.permission).then( res => {
            this.permission = {
              name: '',
              introduction: ''
            }
            this.dialog.create.display = false;
            this.load()
          })
        }
      });
    },
    remove (row) {
      this.$confirm('您是否确认删除该权限', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row.id).then( res => {
          this.load()
        })
      })
    },
    update (row) {
      this.operate = 'update';
      this.permission = JSON.parse(JSON.stringify(row))
      this.dialog.operate.display = true;
    },
    update_ () {
      this.$refs['permission'].validate((valid) => {
        if (valid) {
          update(this.permission).then( res => {
            this.permission = {
              name: '',
              introduction: ''
            }
            this.dialog.operate.display = false;
            this.load()
          })
        }
      });
    },
    load (_page) {
      this.page.loading = true
      let _current = 1
      if (_page === undefined)
        _current = this.table.page;
      else
        _current = _page
      page({ page: _current, size: this.table.size }).then( res => {
        this.table.data = []
        this.table.data = res.data.list
        this.table.total = res.data.count
        this.page.loading = false
      }).catch( err => {
        console.log(err)
        this.page.loading = false
      })
    }
  },
  mounted() {
    this.load()
  }
}
</script>

<style scoped>

</style>
